<template>
    <div id="all">
        <el-row>
            <el-col :span="24" class="grid-content"></el-col>
        </el-row>
        <el-row>
            <el-col :span="15">
                <div class="grid-content"></div>
            </el-col>
            <el-col :span="6" class="login">
                <el-form :rules="rules" :model="user" style="width: 380px; margin: auto; margin-top: 100px; text-align:center;">
                    <el-form-item>
                        <img src="../assets/sw.png" width="196px" height="208px">
                    </el-form-item>
                    <el-form-item>
                        <span style="font-size: 35px; font-weight: 700;">智慧水务管理系统</span>
                    </el-form-item>
                    <el-form-item prop="username">
                        <img src="../assets/user.png" style="float:left">
                        <el-input style="width:300px;" v-model="user.username" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <img src="../assets/key.png" style="float:left">
                        <el-input style="width:300px" v-model="user.password" type="password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login()">登录</el-button>
                        <el-button @click="reset()">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

    </div>
</template>

<script>
export default {
    data() {
        return {
            user: {},
            rules: {
                username: [
                    { required: true, message: "用户名不能为空", trigger: "blur" },
                    { min: 3, max: 18, message: '密码长度在 3 到 18 个字符', trigger: "blur" },
                ],
                password: [
                    { required: true, message: "密码不能为空", trigger: "blur" },
                    { min: 3, max: 18, message: '密码长度在 3 到 18 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        reset() {
            this.user = {
                username: '',
                password: ''
            }
        },
        login() {
            this.$axios.post("/user/login", this.user)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: result.data.message
                        });
                        let loginInfo = JSON.stringify(result.data.data);
                        localStorage.setItem("user", loginInfo);
                        setTimeout(() => {
                            this.$router.push("/index");
                        }, 1000);
                    } else {
                        this.$message.error(result.data.message);
                    }
                }).catch((err) => {
                    console.log(err);
                })
        },

    }
};
</script>

<style>
#all {
    width: 100%;
    height: 100%;
    background-image: url(../assets/bg.jpg);
}

.grid-content {
    border-radius: 4px;
    min-height: 100px;
}

.login {
    font-weight: 400;
    width: 540px;
    height: 700px;
    border: solid #dcdfe6;
    border-radius: 15px;
    background-color: #D5DBE7;
}
</style>
